<template>
<div class='pages'>
  <el-button type='primary' size='small' style='margin-bottom: 20px' @click='goback'>返回</el-button>
  <el-table :data="tableData" tooltip-effect="dark" style="width: 90%" stripe class='record-tabel'>
    <el-table-column type='index' label='序号' width='240'></el-table-column>
    <el-table-column prop="afterValue" label="修改内容" :formatter='formatContent'></el-table-column>
    <el-table-column prop="createTime" label="操作时间" :formatter='formatDate'></el-table-column>
    <el-table-column prop="userName" label="操作人" width='300px'>
      <template slot-scope='scope'>{{scope.row.userName}}<span v-if='scope.row.shopName'>（{{scope.row.shopName}}）</span></template>
    </el-table-column>
  </el-table>
  <div class='footer'>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="pageNum"
                   :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
    <el-button type='primary' size='small' style='margin-left: 20px' @click='getTabLog'>跳转</el-button>
  </div>
</div>
</template>

<script>
  import { mapState } from "vuex";
  import u from '@/util'
  import {
    tabLog
  } from "@/api";
  export default {
    name: 'modify-record',
    computed: mapState(["merchantId","power", "businessScope"]),
    data() {
      return {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        tableData: []
      }
    },
    mounted () {
      this.getTabLog()
    },
    methods: {
      goback() {
        history.back(-1)
        return false
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.pageNum = 1
        this.getTabLog()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getTabLog()
      },
      formatDate(row, column, cellValue, index) {
        let date = u.forDateAndTime(cellValue)
        let arr = date.split(':')
        return arr[0] + ':' + arr[1]
      },
      formatContent(row, column, cellValue, index) {
        let result = ''
        let num = Math.ceil(this.total / this.pageSize)
        let i = this.tableData.length - 1
        switch (+cellValue) {
          case 0:
            if (this.pageNum == num && index == i) {
              result = '选择提成方案为"个人计件提成"'
            }else {
              result = '切换提成方案为"个人计件提成"'
            }
            break;
          case 1:
            if (this.pageNum == num && index == i) {
              result = '选择提成方案为"个人业绩阶梯提成"'
            } else {
              result = '切换提成方案为"个人业绩阶梯提成"'
            }
            break;
          case 2:
            if (this.pageNum == num && index == i) {
              result = '选择提成方案为"暂不执行提成制度"'
            } else {
              result = '切换提成方案为"暂不执行提成制度"'
            }
            break;
        }
        return result
      },
      //查询记录
      getTabLog() {
        let data = {
          shopId: this.merchantId,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
        tabLog(data).then(res => {
           this.tableData = res.data.list
           this.total = res.data.pageTotal
        })
      }
    }
  }
</script>

<style scoped>
  .footer {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
    margin: 20px;
  }

</style>
<style>
  .record-tabel tr td:first-child, .record-tabel tr th:first-child{
    padding-left: 30px;
  }
</style>
